<!-- templates/includes/websocket.html -->
<div id="notification" style="position: fixed; bottom: 20px; right: 20px; background-color: #f0ad4e; color: white; padding: 10px; border-radius: 5px; display: none;">新消息</div>

<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script>
    const chatSocket = new WebSocket(
        'ws://'
        + window.location.host
        + '/ws/chat/global/'
    );

    chatSocket.onopen = function(e) {
        console.log('WebSocket connection established');
    };

    chatSocket.onclose = function(e) {
        console.error('Chat socket closed unexpectedly');
    };

    chatSocket.onmessage = function(e) {
        const data = JSON.parse(e.data);
        const notification = document.getElementById('notification');
        notification.innerHTML = `新消息: ${data.message} <a href="/chat/room/${data.room_name}/">进入房间</a>`;
        notification.style.display = 'block';
        setTimeout(() => {
            notification.style.display = 'none';
        }, 3000);
    };
</script>